<template>
  <div class="box-padding">
    <Row>
      <Col span='8'>
      <Input v-model="obj.name"
             placeholder="单位工程"
             style="width: 300px" />
      </Col>
      <Col span="8">
      <!-- <treeselect v-model="obj.wbsId"
                  placeholder="专业类型"
                  :data="distEngineeringTypeList"
                  style="width: 300px" /> -->
      <Select v-model="obj.wbsId"
              @on-open-change="projectTypeList"
              not-found-text="暂无专业类型"
              ref="treeSelectWbs"
              placeholder="专业类型"
              style="width: 300px">
        <Option v-for="item in list1"
                :value="obj.wbsId"
                :key="item.id"
                style="display: none;">{{ item.title }}</Option>
        <Tree v-model="obj.wbsName"
              :data="wbsList"
              ref="Tree"
              :load-data="loadData"
              style="padding-left:20px"
              v-if="wbsList.length > 0"
              @on-select-change="checkWbs"></Tree>
      </Select>
      </Col>
      <Col span="8">
      <Select v-model="obj.dictRiskGrade"
              placeholder="风险等级"
              style="width: 300px">
        <Option v-for="(item,index) in leveList"
                :key="index"
                :value="item.code">{{ item.name }}</Option>
      </Select>
      </Col>
    </Row>
    <Row style="margin-top: 10px">

      <div class="col">
        <div class="col-item">

          <Select v-model="obj.dictControlEngineering"
                  placeholder="是否控制工程"
                  style="width: 300px">
            <Option v-for="(item,index) in isKongZhi"
                    :key="index"
                    :value="item.code">{{ item.name }}</Option>
          </Select>
        </div>
        <div class="col-item"
             style="float: right">

          <Button @click="unitTreeList"
                  type="primary">搜索</Button>
        </div>
      </div>
    </Row>
    <Table :columns="columns1"
           :data="data1"
           @on-select='select'
           @on-select-all='selectAll'
           @on-select-cancel='selectCancel'
           @on-select-all-cancel='selectAllCancel'></Table>
    <Page :total="page.total"
          size="small"
          :current="this.page.currentPage"
          :page-size="this.page.pageSize"
          show-elevator
          show-sizer
          show-total
          style="text-align: center"
          @on-change="currentChange"
          @on-page-size-change="pageChange" />
    <div class="foot-modal">
      <Row>
        <Col span="2"
             offset="8">
        <Button type="primary"
                @click="save(1)">保存</Button>
        </Col>
        <Col span="2">
        <Button @click='save(0)'>取消</Button>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import crudMixin from '../../../mixins/crudMixin'
import Utils from '../../../common/util'
export default {
  mixins: [crudMixin],
  components: { Treeselect },
  props: ['id'],
  data() {
    return {
      projectName: '',
      columns1: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '序号',
          align: 'center',
          render: (h, params) => {
            return h('span', params.index + 1)
          }
        },
        {
          title: '单位工程',
          key: 'name',
          align: 'center'
        },
        {
          title: '专业类型',
          key: 'wbsName',
          align: 'center'
        },
        {
          title: '风险等级',
          key: 'dictRiskGradeName',
          align: 'center'
        },
        {
          title: '是否控制工程',
          key: 'dictControlEngineeringName',
          align: 'center'
        }
      ],
      data1: [],
      list1: [],
      wbsList: [],
      unitObj: {}, //保存每页的数据，根据页数来储存
      unitList: [], //选中的单位工程
      unitIdList: [], //翻页时储存被选中的id
      obj: {
        projectId: this.id, //机构id
        name: '',
        dictRiskGrade: '', //风险等级
        dictControlEngineering: '' //是否为控制性工程
      },
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      isKongZhi: []
    }
  },
  mounted() {
    // this.unitTreeDetail()
    this.dictTypeList('RISK_GRADE')
    this.getListByTypeCode('IS_CONTROL_ENGINEERING')
    this.unitTreeList()

    this.projectTypeList(this.id)
  },
  methods: {
    //列表请求
    unitTreeList() {
      if (this.unitObj[this.page.currentPage]) {
        this.unitIdList = this.unitObj[this.page.currentPage]
      }
      //window.console.log(this.unitObj)
      let parmes = {
        currentPage: this.page.currentPage,
        pageSize: this.page.pageSize,
        whereMap: this.obj
      }
      this.$api.UnitProject.unitTreeList(parmes).then(resp => {
        if (resp.code == 200) {
          if (this.unitIdList.length > 0) {
            resp.data.resultObject.forEach(item => {
              this.unitIdList.forEach(i => {
                if (item.id == i.id) {
                  item._checked = true
                }
              })
            })
            this.data1 = resp.data.resultObject
          } else {
            this.data1 = resp.data.resultObject
          }

          this.page.total = resp.data.totalRecord
        }
      })
    },
    currentChange(current) {
      //翻页
      this.page.currentPage = current
      this.unitTreeList()
    },
    pageChange(pagesize) {
      //改变页数
      this.page.pageSize = pagesize
      this.unitTreeList()
    },
    //  是否为控制工程
    getListByTypeCode(code) {
      this.$api.UnitProject.getListByTypeCode(code).then(resp => {
        if (resp.code == 200) {
          this.isKongZhi = resp.data
        }
      })
    },
    save(type) {
      if (type == 1) {
        this.unitList = []
        for (var key in this.unitObj) {
          this.unitList = this.unitList.concat(this.unitObj[key])
        }
        this.$emit('postUnit', this.unitList)
      } else {
        this.$emit('postUnit', '')
      }
    },
    select(data) {
      this.unitObj[this.page.currentPage] = data
    },
    selectAll(data) {
      this.unitObj[this.page.currentPage] = data
    },
    selectCancel(data) {
      this.unitObj[this.page.currentPage] = data
    },
    selectAllCancel(data) {
      this.unitObj[this.page.currentPage] = data
    },
    distinct(arr) {
      //去重
      arr = arr.sort()
      let result = [arr[0]]

      for (let i = 1, len = arr.length; i < len; i++) {
        arr[i].id !== arr[i - 1].id && result.push(arr[i])
      }
      return result
    },
    projectTypeList(value) {
      if (value) {
        if (this.id) {
          let res = {
            currentPage: 1,
            pageSize: 99999,
            whereMap: {
              projectId: this.id,
              parentId: 0
            }
          }
          this.$api.WorkstationLedger.professionalTypeList(res).then(res => {
            if (res.code == 200) {
              res.data.resultObject.map(r => {
                this.$set(r, 'title', r.name)
                if (r.hasChildren) {
                  this.$set(r, 'children', [])
                  this.$set(r, 'loading', false)
                }
              })
              this.wbsList = [
                {
                  title: '标准WBS',
                  parentId: 0,
                  hasChildren: false,
                  loading: false,
                  expand: true,
                  children: res.data.resultObject
                }
              ]
            } else {
              this.$Message.error(res.data.msg)
            }
          })
        } else {
          this.$Message.warning('请先选择项目名称')
        }
      }
    },
    loadData(item, callback) {
      let params = {
        currentPage: 1,
        pageSize: 99999,
        whereMap: {
          projectId: this.ledgerObj.projectId,
          parentId: item.id
        }
      }
      let data = []
      this.$api.WorkstationLedger.professionalTypeList(params).then(res => {
        if (res.code == 200) {
          callback(this.getTree(res.data.resultObject))
        } else {
          this.$Message.error(res.data.msg)
        }
      })
    },
    getTree(tree) {
      return tree.map(node => {
        node.title = node.name
        if (node.hasChildren) {
          node.loading = false
          node.children = []
        }
        return node
      })
    },
    checkWbs(data) {
      if (data[0].id) {
        this.list1 = []
        let id = data[0].id
        let title = data[0].title
        this.list1.push({
          id,
          title
        })
        this.obj.wbsId = id
        this.$refs.treeSelectWbs.visible = false
      }
    }
  }
}
</script>
<style lang="scss" scoped >
.col {
  padding: 5px;
  .col-item {
    display: inline-block;
    margin-right: 10px;
  }
  label {
    display: block;
  }
}

.asterisk:before {
  content: '*';
}

.text-center {
  text-align: center;
}
.foot-modal {
  height: 100px;
  width: 100%;
  text-align: center;
  position: fix;
  bottom: 20px;
  margin-top: 30px;
}
</style>